<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知乎热榜</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }
        .zhihu-container{
            width: 700px;
            min-height: 200px;
            margin: 50px auto;
        }
        .zhihu-container .content li{
            width: 100%;
            min-height: 100px;
            border-bottom: solid 1px #ccc;
            padding: 10px;
            overflow: hidden;
        }

        li > div{
            float:left;
        }

        li .order{
            width: 5%;
        }

        li .intro{
            width: 60%;
        }

        li .img{
            width: 30%;
            float:right;
        }

        li .img img{
            width: 100%;
        }

        .zhihu-container .content li .wide{
            width: 95%
        }
    </style>
</head>

<body>

    <div id="root">

        

    </div>

    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <script type="text/babel">
        // https://www.zhihu.com/hot
        let data = [
            {
                "id": "0_1628426974.6828957",
                "title": "如何看待北京野生动物园通报，游客因琐事发生撕打，引发附近动物效仿？动物真的会模仿这类行为吗？",
                "hot": "1504 万领域热度"
            },
            {
                "id": "1_1628426974.6836996",
                "title": "联合利华中国区副总裁曾锡文称梦龙事件是「无妄之灾」，对此你如何评价？",
                "img": "https://pic1.zhimg.com/80/v2-14067671559a9f20bc2a349cac69ec96_1440w.png",
                "hot": "862 万领域热度"
            },
            {
                "id": "2_1628426974.6843448",
                "title": "因禄口机场疫情防控不力，南京市卫健委主任被免职，副市长被记过处分，还有哪些信息值得关注？",
                "img": "https://pic2.zhimg.com/80/v2-bf056df27e6e6edadb1ee4a11ac06e60_720w.png",
                "hot": "742 万领域热度"
            },
            {
                "id": "3_1628426974.685571",
                "title": "上海电气总裁黄瓯跳楼自尽，有哪些值得关注的信息？这会对上海电气有哪些影响？",
                "img": "https://pic2.zhimg.com/80/v2-a08de40b4bacb53c1d4be86752e8b8c1_1440w.png",
                "hot": "688 万领域热度"
            },
            {
                "id": "4_1628426974.6863558",
                "title": "郑州一医生确诊，前 7 次检测结果为阴，第 8 次才显阳，德尔塔具有高隐蔽性吗？防范还需要注意什么？",
                "img": "https://pic3.zhimg.com/v2-33146c5a7c499464396c120d8afa0969_720w.jpg?source=2044ae36",
                "hot": "401 万领域热度"
            },
            {
                "id": "5_1628426974.687",
                "title": "8 月 7 日，江苏新增本土确诊 38 例，其中扬州 36 例，目前情况如何？有哪些信息值得关注？",
                "img": "https://picb.zhimg.com/50/v2-a8a242a31e99275f90e871b600890c6a_b.jpg",
                "hot": "127 万领域热度"
            },
            {
                "id": "6_1628426974.6875176",
                "title": "在家里阳台种满花草是一种什么样的体验？",
                "img": "https://pic1.zhimg.com/50/v2-488e63324e50356e2ba5da6fdf4aea8c_b.jpg",
                "hot": "87 万领域热度"
            },
            {
                "id": "7_1628426974.6881711",
                "title": "如何看待女子撞伤右肩被做左肩手术，医院称「确实发生医疗失误」？涉事医生及医院将承担哪些责任？",
                "hot": "77 万领域热度"
            },
            {
                "id": "8_1628426974.6887908",
                "title": "升学宴该怎么致辞？",
                "img": "https://pic3.zhimg.com/50/v2-7f1afe199bab972719ca3878061db54a_b.jpg",
                "hot": "59 万领域热度"
            },
            {
                "id": "9_1628426974.6892145",
                "title": "客机为什么不用飞翼式气动外形？",
                "img": "https://pic1.zhimg.com/50/v2-c3af29735119276b70b0c36a5ac12371_b.jpg",
                "hot": "52 万领域热度"
            },
            {
                "id": "10_1628426974.6895468",
                "title": "为什么骑很多种类的马，但是没有人骑斑马？",
                "img": "https://pic3.zhimg.com/v2-7f4e3dea8f103a43764d72fa814409fc.jpg?source=2044ae36",
                "hot": "48 万领域热度"
            },
            {
                "id": "11_1628426974.689924",
                "title": "怎样很快彻底的忘记一个人？",
                "img": "https://pic3.zhimg.com/v2-7f4e3dea8f103a43764d72fa814409fc.jpg?source=2044ae36",
                "hot": "46 万领域热度"
            },
            {
                "id": "12_1628426974.6901717",
                "title": "熬夜熬习惯了，晚上睡不着怎么办？",
                "img": "https://pic3.zhimg.com/50/v2-43420ee179aaa5bc93d95099a36a82c3_b.jpg",
                "hot": "45 万领域热度"
            },
            {
                "id": "13_1628426974.6904864",
                "title": "各个时代都有哪些占据绝对优势的「顶级掠食者」？",
                "img": "https://picb.zhimg.com/50/v2-076f9409cfb4a13616de67324bab3ddc_b.jpg",
                "hot": "36 万领域热度"
            },
            {
                "id": "14_1628426974.6908004",
                "title": "如何看待新冠「拉姆达」变异毒株或可逃避中和抗体？人类想要战胜疫情该怎样努力？",
                "img": "https://pica.zhimg.com/80/v2-fde3e85895709e1af6146bf15e4b216d_1440w.jpg?source=1940ef5c",
                "hot": "35 万领域热度"
            }
        ]

        class Hot extends React.Component{
            render(){
                let {order, title, hot, img} = this.props;
                return <li>
                        <div className="order">{order}</div>
                        <div className={`intro ${img ? '' : 'wide'}`} >
                            <h3>{title}</h3>
                            <div className="hot">
                                <svg class="Zi Zi--Hot" fill="currentColor" viewBox="0 0 24 24" width="18" height="18"><defs><linearGradient id="id-2014200654-a" x1="63.313%" x2="46.604%" y1="-13.472%" y2="117.368%"><stop offset="2.35%" stop-color="#EC471E"></stop><stop offset="100%" stop-color="#FF6DC4"></stop></linearGradient></defs><path fill="url(#id-2014200654-a)" d="M14.553 20.78c.862-.651 1.39-1.792 1.583-3.421.298-2.511-.656-4.904-2.863-7.179.209 2.291.209 3.73 0 4.314-.41 1.143-1.123 1.983-1.91 2.03-1.35.079-2.305-.512-2.863-1.774-.676 1.25-.782 2.556-.318 3.915.31.906.94 1.684 1.89 2.333C7.144 20.131 5 17.336 5 14.022c0-2.144.898-4.072 2.325-5.4.062 2.072.682 3.598 2.13 4.822-.67-1.112-.734-2.11-.734-3.517 0-3.253 2.067-6.007 4.913-6.927a7.35 7.35 0 0 0 2.157 4.918C17.722 9.214 19 11.463 19 14.022c0 3.073-1.844 5.7-4.447 6.758z" fill-rule="evenodd"></path></svg>
                                {hot}
                            </div>
                        </div>
                        <div className="img"><img src={img} alt="" /></div>
                    </li>
            }
        }

        class App extends React.Component{
            render(){
                return <div className="zhihu-container">
                    <h2>知乎热榜</h2>
                    <ul className="content">
                        {
                            data.map((item,index) => {
                                return <Hot key={index} {...item} order={index+1} />
                            })
                        }
                    </ul>
                </div>
            }
        }

        ReactDOM.render(<App />, document.querySelector("#root"));
        

    </script>
</body>

</html>